<style>
    #container {
        padding: 0px;
        border-radius: 0px;
        border-width: 0px;
    }

    #img_preview {
        display: inline;
        float: left;
        margin-top: 40px;
        overflow: hidden;
    }

    .imgdiv {
        display: inline;
        float: left;
        text-align: center;
        border: 1px solid #ccc;
        padding: 5px;
        padding-bottom: 0;
        margin-right: 10px;
    }

    #operate {
        margin-top: 5px;
    }

    #operate a {
        cursor: pointer
    }

    #operate a:hover {
        color: #009688;
    }

    .layui-btn {
        margin-top: 10px;
    }
</style>
<script type="text/javascript" charset="utf-8" src="__STATIC_JS__ddsort/ddsort.js"></script>
<div style="padding:30px" class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <label class="layui-form-label">版型分类：</label>
        <div class="layui-input-inline" id="refresh_cat">
            <select name="goods_cat_id[]" id="goods_cat_id" lay-filter="goods_cat_id">
                <option value="">请选择分类</option>
                {if condition="count($catList)>0"}
                {volist name="catList" id="vo"}
                <option value="{$vo.id}">{$vo.name}</option>
                {/volist}
                {/if}
            </select>
        </div>
        <div id="view"></div>
        <div class="layui-form-mid layui-word-aux">
            <a href="javascript:void(0);" class="add-class">添加分类</a>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">版型名称：</label>
        <div class="layui-input-inline">
            <input type="text" name="name" id="name" required lay-verify="required" placeholder="请输入分类名称"
                   autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">颜色值：</label>
        <div class="layui-input-inline">
            <input type="text" name="color_value" id="color_value" required lay-verify="required" placeholder="请输入颜色值"
                   autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label" style="width: 50%;text-align: left">如：#F9F9F9 或者 rgb('255','255','255')</label>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上架/下架</label>
        <div class="layui-input-block">
            <input type="radio" name="marketable" value="1" title="上架" checked>
            <input type="radio" name="marketable" value="2" title="下架">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i>商品图片：</label>

        <div class="layui-upload" id="imgs">
            <button type="button" class="layui-btn" id="banxing_img" lay-filter="banxing_img" onclick="upImage()">上传图片
            </button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                <p>2D定制可选颜色配图：[可拖动图片进行排序]</p>
                <div class="layui-upload-list" id="img_preview"></div>
            </blockquote>
        </div>

    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">排序：</label>
        <div class="layui-input-block">
            <input type="number" name="sort" id="sort" required lay-verify="required" placeholder="排序"
                   autocomplete="off" class="layui-input" value="100">
        </div>
    </div>
    <button class="layui-btn" lay-submit="" lay-filter="save">保存</button>
</div>

<script id="image_tpl" type="text/html">
    {{# layui.each(d, function(index, item){  }}
    <div class="imgdiv">
        <img src="{{ item.src }}" class="layui-upload-img" style="width: 100px;height:100px;">
        <div id="operate">
            <div><a class="del" onclick="delImg(this,'{{ item.image_id }}')">删除</a></div>
        </div>
        <input type='hidden' name='goods[img][]' value="{{ item.image_id }}">
    </div>
    {{#  }); }}
</script>

<script id="cat_tpl" type="text/html">
    {{# if (d.list.length) { }}
    <div class="layui-input-inline">
        <select id="cateid" name="goods_cat_id[]">
            <option value="">请选择分类</option>
            {{# layui.each(d.list, function(index, item){ }}
            <option value="{{ item.id }}">{{ item.name }}</option>
            {{# }); }}
        </select>
    </div>
    {{# }; }}
</script>


<script>
    var laytpl = '';
    //渲染表单
    layui.use(['form', 'laytpl', 'upload'], function () {
        var form = layui.form;
        laytpl = layui.laytpl;
        form.render();
        form.on('select(goods_cat_id)', function (data) {
            var cat_id = data.value;
            var getTpl = cat_tpl.innerHTML
                , view = document.getElementById('view');
            if (cat_id) {
                $.ajax({
                    url: '{:url("Goods/getCat")}',
                    type: 'post',
                    data: {
                        'cat_id': cat_id,
                    },
                    dataType: 'json',
                    success: function (e) {
                        if (e.status === true) {
                            var tmpData = {};
                            tmpData.list = e.data.length ? e.data : []
                            // laytpl 执行渲染
                            laytpl(getTpl).render(tmpData, function (html) {
                                view.innerHTML = html;
                            });
                            form.render();
                        } else {
                            layer.msg(e.msg, {time: 1300});
                        }
                    }
                })
            }
        });

        //保存商品
        form.on('submit(save)', function(data){
            formData = data.field;
            if(!formData){
                layer.msg('请先完善数据', {time: 1300});
                return false;
            }
            $.ajax({
                url: '{:url("Banxing/add")}',
                type: 'post',
                data: formData,
                dataType: 'json',
                success: function(e){
                    if(e.status === true){
                        layer.msg(e.msg, {time: 1300}, function(){
                            window.location.href='{:url("Banxing/index")}';
                        });
                    }else{
                        layer.msg(e.msg, {time: 1300});
                    }
                }
            })
            return false;
        });

    });

    /**
     * 删除图片
     * @param obj
     * @param imageId
     */
    function delImg(obj, imageId) {
        var imgDiv = $(obj).parent().parent().parent();
        imgDiv.remove();
    }

    //上传dialog
    function upImage() {
        var myImage = _editor.getDialog("insertimage");
        myImage.open();
    }

    var _editor = UE.getEditor("edit_image", {
        initialFrameWidth: 800,
        initialFrameHeight: 300,
    });
    _editor.ready(function () {
        _editor.hide();
        _editor.addListener('beforeInsertImage', function (t, arg) {
            if (arg.length > 5) {
                layer.msg("最多只能选择5张图片，请重新选择");
                return false;
            }
            var getTpl = image_tpl.innerHTML
                , view = document.getElementById('img_preview');
            var oldHtml = $("#img_preview").html();
            if (arg.length > 0) {
                laytpl(getTpl).render(arg, function (html) {
                    view.innerHTML = oldHtml + html;
                });
            } else {
                layer.msg("请先上传图片");
                return false;
            }
        });
    });


    //商品图片排序
    $('.layui-upload-list').DDSort({
        target: '.imgdiv',
        delay: 100,
        floatStyle: {
            'border': '1px solid #ccc',
            'background-color': '#fff'
        }
    });
</script>
<textarea id="edit_image" style="display: none;"></textarea>